import {
  Select,
  SelectContent,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/selector/base_selector";
import { DefaultSelectorProps } from "@/components/ui/selector/default_selector";
import { Item } from "@radix-ui/react-select";

interface GenerateSelectorProps extends DefaultSelectorProps<GenerateOption> {
  options?: GenerateOption[];
}
interface GenerateOption {
  ID: string;
  Title: string;
  Content: string;
  CreateTime: string;
}

export const GenerateSelector = ({
  options = [],
  errorFlag = false,
  className = "",
  placeholder = "请选择",
  isLoading = false,
  errorMessage,
  ...props
}: GenerateSelectorProps) => {
  return (
    <Select {...props}>
      <SelectTrigger className={className} errorFlag={errorFlag}>
        <SelectValue placeholder={placeholder}>{props.value}</SelectValue>
      </SelectTrigger>
      <SelectContent
        isLoading={isLoading}
        errorMessage={errorMessage}
        length={options.length}
      >
        {options.map((option) => (
          <Item key={option.ID} value={option.ID}>
            <div className="flex flex-col gap-1">
              <span className="font-medium">{option.Title}</span>
              <span className="text-xs text-muted-foreground">
                {option.Content}
              </span>
              <span className="text-xs text-gray-500">{option.CreateTime}</span>
            </div>
          </Item>
        ))}
      </SelectContent>
    </Select>
  );
};

export type { GenerateOption };
